<template>
  <div class="app-container">
    <!--集团管理头部展示区-->
    <div class="top">
      <el-button v-for="(item,index) in btnStr" :key="'bloc'+index" type="primary" round style="width: 124px;height: 32px;margin-right: 10px" @click="clickFunction(item)">
        {{ item.name }}
      </el-button>
      <br />
      <!-- <el-input
        v-for="(item,index) in iptStyle"
        :key="index"
        style="width: 200px;height: 36px;margin: 30px 10px 0px 0px"
        :placeholder="item.str"
        :suffix-icon="item.icon"
      >
      </el-input> -->
      <!-- 搜索表单 -->
      <div class="flexSpace" style="align-items: flex-start">
        <div>
          <div class="flexLeft">
            <div>
              <el-input
                v-model="crud.query.id"
                placeholder="集团编号"
                suffix-icon="el-icon-search"
              >
              </el-input>
            </div>
            <div>
              <el-input
                v-model="crud.query.groupName"
                placeholder="集团名称"
                suffix-icon="el-icon-search"
              >
              </el-input>
            </div>
            <div>
              <el-select v-model="crud.query.status" placeholder="合作状态">
                <el-option
                  v-for="item in groupStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div>
              <el-select v-model="crud.query.signContractFlag" placeholder="是否签合同">
                <el-option
                  v-for="item in contractStat"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="flexLeft">
            <div>
              <el-date-picker v-model="crud.query.startDate" type="date" placeholder="创建日期">
              </el-date-picker>
            </div>
          </div>
        </div>
        <div style="background: #f1f2f6; padding: 7px; border-radius: 50%">
          <i class="el-icon-arrow-down" style="color: #999999"></i>
        </div>
      </div>
    </div>
    <div class="center">
      <el-button type="primary" round style="width: 120px;height: 36px;font-size: 18px" @click="crud.toQuery">>搜索</el-button>
      <el-button round style="width: 120px;height: 36px;font-size: 18px;color: #fff;background: #2EC9C7">导出</el-button>
      <el-button round style="width: 68px;height: 36px;font-size: 18px">列</el-button>
    </div>
    <div class="bottom">
      <crudOperation>
        <rrOperation slot="optsLeft" :crud="crud"></rrOperation>
      </crudOperation>
      <el-table ref="table" :data="crud.data" size="small" style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" checked="true"></el-table-column>
        <el-table-column prop="id" width="159" label="集团编号"></el-table-column>
        <el-table-column
          prop="groupName"
          width="150"
          label="集团门诊名称"
        >
          <template slot-scope="scope">
            <a
              style="color: #719DC9;text-decoration:underline"
              @click="blocDetail(scope.row)"
            >{{ scope.row.groupName }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="clinicCount" width="120" label="旗下门诊数量"></el-table-column>
        <el-table-column prop="doctorCount" width="135" label="旗下医生数量">
          <template slot-scope="scope">
            <a
              style="color: #719DC9;text-decoration:underline"
            >{{ scope.row.doctorCount }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="patientCount" width="170" label="旗下患者数量">
          <template slot-scope="scope">
            <a
              style="color: #719DC9;text-decoration:underline"
            >{{ scope.row.patientCount }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="groupType" width="150" label="诊所类型"></el-table-column>
        <el-table-column prop="userId" width="150" label="集团管理员"></el-table-column>
        <el-table-column prop="userId2" width="150" label="集团账单管理员"></el-table-column>
        <el-table-column prop="signContractFlagStr" width="150" label="是否签合同"></el-table-column>
        <el-table-column prop="contractEndData" width="150" label="合同截止时间"></el-table-column>
        <el-table-column prop="packageRuleName" width="150" label="套餐规则"></el-table-column>
        <el-table-column prop="productRuleName" width="150" label="产品规则"></el-table-column>
        <el-table-column prop="createDate" width="150" label="创建时间"></el-table-column>
        <el-table-column prop="statusStr" width="150" label="合作状态"></el-table-column>
        <!-- @click.native.prevent="deleteRow(scope.$index, tableData)" -->
        <el-table-column fixed="right" label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              round
              style="background: #d8e4f6; color: #508fcc; border: none"
              @click.native.prevent="editGroup(scope.row.id)"
            >
              编辑
              <!-- 停用 -->
              <!-- {{ scope.row.stat === 0 ? "停用" : "正常" }} -->
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination></pagination>
    </div>
    <!-- :title="titleArr[dialogIndex]" -->
    <el-dialog
      class="outPatient"
      :visible.sync="addGroupDialog"
      :title="titleName"
      @close="dialogClose"
    >
      <addOutpatient
        v-if="dialogIndex === 0"
        :id="dataId"
        ref="addOutpatient"
      >
      </addOutpatient>
      <!-- <addOutpatient
        v-if="dialogIndex === 1"
        ref="addOutpatient"
        :id="dataId"
      >
      </addOutpatient> -->
      <editRule v-if="dialogIndex === 1">
      </editRule>
      <pauseCollaborate v-if="dialogIndex === 2">
      </pauseCollaborate>
      <exportPatient v-if="dialogIndex === 3" ref="exportPatient"></exportPatient>
      <div class="flexRight">
        <div>
          <span slot="footer" class="dialog-footer">
            <el-button
              class="dialogBtn"
              round
              @click="closeDialog"
            >取消</el-button>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button
              type="primary"
              class="dialogBtn"
              round
              @click="dialogSure"
            >保存</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { operQueryOne, operPath } from '@/api/oper';
// import crudPatient from '@/api/patient';
// TODO Crud 组件依赖
import CRUD, { presenter, header, crud } from '@crud/crud';
import { PROCESS_EN_TYPE } from '@/utils/index';
import rrOperation from '@crud/RR.operation';
import crudOperation from '@crud/CRUD.operation';
import pagination from '@crud/Pagination';
import addOutpatient from './components/addOutpatient';
import editRule from './components/editRule';
import exportPatient from './components/exportPatient';

import pauseCollaborate from './components/pauseCollaborate';
import { getDictMap } from '@/api/system/dictDetail';
import { mapMutations, mapGetters } from 'vuex';

export default {
  name: 'Bloc',
  components: {
    addOutpatient,
    editRule,
    pauseCollaborate,
    rrOperation,
    pagination,
    crudOperation,
    exportPatient
  },
  // TODO 混入数据
  mixins: [presenter(), header(), crud()],
  // TODO 字典项数据
  dicts: ['gender', 'patient_compliance', 'patient_parent_rel', 'patient_archive'],
  cruds() {
    return CRUD({
      title: '集团管理',
      url: operPath.getQuery,
      sort: 'id,desc',
      serverPath: PROCESS_EN_TYPE.VUE_APP_SALEAREA_API,
      // crudMethod: { ...crudPatient },
      query: {
        id: '', // 集团编号
        groupName: '', // 集团名称
        startDate: '', // 创建开始建
        endDate: '', // 创建结束时间
        status: '', // 合作状态
        signContractFlag: ''// 合同签署
      },
      props: { searchToggle: false },
      optShow: { add: false, download: false, reset: false },
      optRightShow: {
        search: false,
        refresh: false
      }
    });
  },
  data() {
    return {
      btnStr: [{ name: '创建集团', id: 0 }, { name: '规则配置', id: 1 }, { name: '暂停合作', id: 2 }, { name: '导出诊所', id: 3 }],
      iptStyle: [
        {
          str: '集团编号',
          icon: 'el-icon-search'
        },
        {
          str: '集团名称',
          icon: 'el-icon-search'
        },
        {
          str: '合作状态',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '是否签合同',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '创建合同',
          icon: 'el-icon-date'
        }
      ],
      titleArr: [
        '创建集团门诊',
        '规则配置',
        '暂停合作',
        '导出诊所'
      ],
      tableData: [],
      blocId: [],
      dialogIndex: -1,
      addGroupDialog: false,
      groupList: {
        id: '',
        groupName: '',
        contract_stat: ''
      },
      contractStat: [],
      groupStatus: [],
      titleName: '',
      dataId: '',
      tableSelectArr: []

    };
  },
  computed: {
    ...mapGetters(['linkSearch'])
  },
  watch: {
    addGroupDialog: function(newState) {
      if (!newState) {
        this.dialogIndex = -1;
      }
    }
  },
  created() {
    // this.initData();
  },
  mounted() {
    getDictMap('contract_stat').then((e) => {
      this.contractStat = e.contract_stat;
    });
    getDictMap('group_status').then((e) => {
      this.groupStatus = e.group_status;
    });
    console.log('集团管理linkSearch---------', this.linkSearch);
  },
  methods: {
    ...mapMutations({
      'CHANGE_LINKSEARCH': 'settings/CHANGE_LINKSEARCH'
    }),
    // 表格选中回调
    handleSelectionChange(val) {
      console.log(val);
      this.tableSelectArr = val;
    },
    editGroup(id) {
      this.addGroupDialog = true;
      this.titleName = '编辑集团';
      this.dialogIndex = 0;
      this.dataId = id;
    },
    initData() {
      this.crud.toQuery();
      this.closeDialog();
      // operQuery().then(res => {
      //   this.tableData = res.content;
      // });
    },
    dialogSure() {
      switch (this.dialogIndex) {
        case 0:
          if (this.dataId) {
            this.$refs.addOutpatient.editOutpatient(this.initData);
          } else {
            this.$refs.addOutpatient.addOutpatient(this.initData);
          }
          break;
        case 1:
          break;
        case 3:
          this.exportArr = this.$utils.objToUrl({ field: this.$refs.exportPatient.exportDataFun(), id: this.tableSelectArr[0].id });
          this.exportDataFun();
      }
    },
    // 导出数据
    exportDataFun() {
      const link = document.createElement('a');
      link.style.display = 'none';
      link.href = process.env.VUE_APP_SALEAREA_API + `org/group/download?${this.exportArr}`;
      document.body.appendChild(link);
      link.click();
      this.closeDialog();
    },
    // 关闭弹框回调
    dialogClose() {
      this.addGroupDialog = false;
      this.dialogIndex = -1;
    },
    // 关闭弹窗
    closeDialog() {
      this.addGroupDialog = false;
      this.dialogIndex = -1;
    },
    blocDetail(row) {
      operQueryOne(row.id).then(res => {
        // const id = res.id;
        res = JSON.stringify(res);
        this.$router.push(
          { path: 'details', query: { blocDetail: res } }
        );
      });
    },
    clickFunction(item) {
      this.titleName = this.titleArr[item.id];
      this.dialogIndex = item.id;
      switch (item.id) {
        case 3:
          if (this.tableSelectArr.length > 1) {
            this.$message({
              showClose: true,
              message: '只能选择一个诊所',
              type: 'warning'
            });
          } else if (this.tableSelectArr.length === 0) {
            this.$message({
              showClose: true,
              message: '请选择选择一个诊所',
              type: 'warning'
            });
          } else {
            this.addGroupDialog = true;
          }
          break;
        case 0:
          this.dataId = '';
          this.addGroupDialog = true;
          break;
        default:
          this.dialogIndex = item.id;
          this.addGroupDialog = true;
          break;
      }
    }
  },
  destroyed() {
    this.CHANGE_LINKSEARCH('');
  }
};
</script>

<style  lang="scss">
.outPatient{
  .el-dialog{
    width: 860px;
  }
  .el-dialog__body{
    padding: 32px 70px;
  }
}

.top {
  width: 100%;
  height: 170px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.bottom {
  margin-top: 20px;
}
.flexRight {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
}
.flexSpace {
  padding: 30px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flexLeft {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 20px 0;
  >div{
    width: 23%;
  }
}
</style>
